<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <style>
            /*
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            */
            body {
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                background: #222;
            }
            
            textarea {
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック';
                font-size: 14px;
            }
            
            #preview-main {
                position: absolute;
                margin: auto;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                width: 900px;
                height: 300px;
            }
            
            #preview-area {
                display: table-cell;
                vertical-align: middle;
                margin: 0px auto;
                width: inherit;
                height: inherit;
                background-color: white;
                border-radius: 8px;
                box-shadow: 0px 0px 16px 0px #fff;
                
                color: white;
                text-align: center;
                font-size: 70px;
            }
            #main {
                width: 640px;
            }
            
            #popup-window {
                -webkit-transition: 500ms;
                -moz-transition: 500ms;
                -o-transition: 500ms;
                transition: 500ms;
            }
            #popup-window .cover {
                content: "";
                position: absolute;
                display: block;
                left: 0px;
                top: 0px;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(20, 20, 20, 0.75);
                z-index: 100;
            }
            #popup-window .main {
                position: absolute;
                left: 0px;
                top: 0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                padding: 20px;
                width: 640px;
                height: 320px;
                background-color: #222;
                box-shadow: 0px 0px 8px 0px #aaa;
                border-radius: 8px;
                
                color: white;
                
                z-index: 200;
            }
            
            #popup-window[data-enable="false"] {
                visibility: hidden;
                opacity: 0.0;
            }
            
            #popup-window[data-enable="true"] {
                visibility: visible;
                opacity: 1.0;
            }
        </style>
        <script src="http://tmlib-js.googlecode.com/svn/trunk/src/tmlib.js"></script>
        <script src="main.js"></script>
    </head>
    
    <body>
        <div id=""></div>
        <div id="preview-main">
            <div id="preview-area">
                <span id="main">Time is money!</span>
            </div>
        </div>
        
        <div id="popup-window" data-enable="false">
            <div class="cover" onclick="hideCSSValue();"></div>
            <div class="main">
                <p>
                    下記のコードをコピペして使って下さい.
                </p>
                <textarea id="result" rows="10" cols="60" onclick="this.select();"></textarea><br />
                <button onclick="hideCSSValue();">OK</button>
            </div>
        </div>
    </body>
    
</html>